import React from "react";

class ListDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [
        {
          id: "id-1",
          title: "标题1",
        },
        {
          id: "id-2",
          title: "标题2",
        },
        {
          id: "id-3",
          title: "标题3",
        },
      ],
    };
  }

  handleChange = () => {
    // 这里的 this.state.list 是一个数组，不能直接修改，需要使用 setState
    // this.state.list[0].title = '标题1修改'
    // this.setState({
    //   list: this.state.list
    // })

    // 使用 map 方法，返回一个新的数组，不会修改原数组
    this.setState({
      list: this.state.list.map(item => {
        return item.id === 'id-1' ? {...item, title: '标题1修改'} : item
      })
    })
  }

  render() {
    return (
      <>
        <ul>
          {/* 注释 */}
          {
            /* 注释 */
            this.state.list.map((item, index) => {
              // 这里的 key 和 Vue 的 key 类似，必填，不能是 index 或 random
              return (
                <li key={item.id}>
                  index {index}; id {item.id}; title {item.title}
                </li>
              );
            })
          }
        </ul>
        <hr />
        <button onClick={this.handleChange}>update</button>
      </>
    );
  }
}

export default ListDemo;
